import React, { useState } from 'react';
import {
  CustomProvider,
  Button,
  Container,
  Header,
  Navbar,
  Content,
  FlexboxGrid,
  Panel,
  Form,
  ButtonToolbar,
  Divider,
} from 'rsuite'

import MyCounter from './features/myCounter/MyCounter';
import './App.css';
import NavbarBrand from 'rsuite/esm/Navbar/NavbarBrand';

import 'rsuite/dist/rsuite.min.css'
import Todos from './features/todo/Todos';
import { add } from './features/todo/todosSlice';
import { useDispatch } from 'react-redux';
import { v4 } from 'node-uuid';

function App() {
  const dispatch = useDispatch()
  const [text, setText] = useState('')
  return (
    <CustomProvider theme="dark">
      <div className="main">
        <Container>
          <Header>
            <Navbar appearance="inverse">
              <NavbarBrand>React Redux Todo</NavbarBrand>
            </Navbar>
          </Header>
          <Content>
            <FlexboxGrid justify="center">
              <FlexboxGrid.Item colspan={12}>
                <Panel header={<h3>添加Todo</h3>} bordered>
                  <Form fluid>
                    <Form.Group>
                      <Form.ControlLabel>你想干点什么?</Form.ControlLabel>
                      <Form.Control name="task"
                      value={text}
                      onChange={(value) => {
                        setText(value)
                      }}
                      />
                    </Form.Group>
                    <Form.Group>
                      <ButtonToolbar>
                        <Button appearance="primary" onClick={() => {
                            dispatch(add({
                              id: v4(),
                              text
                            }))
                            // setText('')
                          }
                        }>创建</Button>
                      </ButtonToolbar>
                    </Form.Group>
                  </Form>
                </Panel>
                <Divider />
                <Todos />

              </FlexboxGrid.Item>
            </FlexboxGrid>
          </Content>
        </Container>
      </div>
    </CustomProvider>
  )
}

export default App;
